<template>
  <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="600px">
    <el-form ref="form" :model="form"  :inline="true" size="small" label-width="100px" >
      <el-form-item label="菜单类型" prop="type">
        <el-radio-group v-model="form.type" size="mini" >
          <el-radio-button label="catalog"><i class="el-icon-folder"></i>目录</el-radio-button>
          <el-radio-button label="menu"><i class="el-icon-menu"></i>菜单</el-radio-button>
          <el-radio-button label="button"><i class="el-icon-cpu"></i>按钮</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="菜单名称" prop="menuName">
        <el-input v-model="form.menuName" placeholder="菜单标题" style="width: 450px"/>
      </el-form-item>
      <el-form-item label="菜单图标" prop="icon">
        <el-popover
          placement="bottom-start"
          width="450"
          trigger="click">
          <FIconSelect @selected="selectedIcon"></FIconSelect>
          <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" style="width: 450px" readonly>
            <i slot="prefix" :class="form.icon" />
          </el-input>
        </el-popover>
      </el-form-item>
      <el-form-item label="路由地址" prop="path" v-if="form.type!='button'">
        <el-input v-model="form.path" placeholder="路由地址" style="width: 450px">
        </el-input>
      </el-form-item>
      <el-form-item label="组件名称" prop="componentName" v-if="form.type==='menu' && form.isFrame==='N'">
        <el-input v-model="form.componentName" placeholder="组件名称" style="width: 450px"/>
      </el-form-item>
      <el-form-item label="组件路径" prop="component" v-if="form.type==='menu' && form.isFrame==='N'">
        <el-input v-model="form.component" placeholder="组件路径" style="width: 450px"/>
      </el-form-item>
      <el-form-item label="菜单权限" prop="permission">
        <el-input v-model="form.permission" placeholder="菜单权限" style="width: 200px"/>
      </el-form-item>
      <el-form-item label="外链菜单" prop="isFrame" v-if="form.type==='menu'">
        <el-radio-group v-model="form.isFrame" size="mini" style="width: 100px">
          <el-radio-button label="Y">是</el-radio-button>
          <el-radio-button label="N">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="菜单可见" prop="isHidden" v-if="form.type!='button'">
        <el-radio-group v-model="form.isHidden" size="mini" >
          <el-radio-button label="N">是</el-radio-button>
          <el-radio-button label="Y">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="菜单排序" prop="sort">
        <el-input-number v-model="form.sort" controls-position="right"  :min="1" :max="99" style="width: 100px"/>
      </el-form-item>
      <el-form-item label="是否有效" prop="isValid">
        <el-switch
          v-model="form.isValid"
          active-color="#409EFF"
          inactive-color="#F56C6C"
          active-value="Y"
          inactive-value="N">
        </el-switch>
      </el-form-item>
      <el-form-item label="上级目录" prop="parentMenuId">
        <treeselect
          v-model="form.parentMenuId"
          :options="menus"
          :load-options="loadMenus"
          style="width: 450px;"
          placeholder="选择上级类目"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="crud.cancelCU">取消</el-button>
      <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import crudAPI from '@/api/system/menu'
  import CRUD, {crud, form} from '@/components/f-crud/f-crud'
  import FIconSelect from '@/components/f-iconSelect/f-iconSelect'
  import Treeselect, { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  const defaultForm = {id: null, type: 'catalog', menuId: null, menuName: null, icon: 'el-icon-eleme', path: null, componentName: null, component: null, permission: null, isFrame: 'N', isHidden: 'N', sort: 99, isValid: 'Y', parentMenuId: 0}
  export default {
    mixins: [crud(), form(defaultForm)],
    components: {
      FIconSelect,
      Treeselect
    },
    data () {
      return {
        menus: []
      }
    },
    methods: {
      // 新增与编辑前做的操作
      [CRUD.HOOK.afterToCU] (crud, form) {
        this.menus = []
        if (form.menuId != null) {
          if (form.parentMenuId === null) {
            form.parentMenuId = 0
          }
          this.getSupMenus(form.menuId)
        } else {
          this.menus.push({ id: 0, label: '顶级类目', children: null })
        }
      },
      selectedIcon (iconName) {
        this.form.icon = iconName
      },
      getSupMenus (menuId) {
        crudAPI.getMenuSuperior(menuId).then(res => {
          if (res.status === 200) {
            const child = function (obj) {
              return obj.map(item => {
                item.id = item.menuId
                item.label = item.menuName
                if (!item.hasChildren) {
                  item.children = undefined
                } else if (item.children && item.children.length > 0) {
                  item.isDefaultExpanded = true
                  child(item.children)
                }
                return item
              })
            }
            this.menus = [{ id: 0, label: '顶级类目', children: child(res.data) }]
          }
        })
      },
      loadMenus ({action, parentNode, callback}) {
        if (action === LOAD_CHILDREN_OPTIONS) {
          const params = {
            params: JSON.stringify({
              parentMenuId: parentNode.id
            })
          }
          crudAPI.getMenus(params).then(res => {
            if (res.status === 200) {
              parentNode.children = res.data.map(function (obj) {
                obj.id = obj.menuId
                obj.label = obj.menuName
                if (!obj.hasChildren) {
                  obj.children = undefined
                }
                return obj
              })
              setTimeout(() => {
                callback()
              }, 100)
            }
          })
        }
      }
    }
  }
</script>
<style scoped>
</style>
